<script setup>
import { ElMessage } from 'element-plus';
import { reactive, toRefs,ref, inject, onMounted } from 'vue';
import { useItem } from '../../../../store/index.js';
import { getConfigMapListHandler as getList } from '../../../../api/configmap.js'
import { deleteTableRow } from '../../../../utils/utils';
import Oct2Decimal from './Oct2Decimal.vue';
const useItemer = useItem()
const props = defineProps({
    volumeConfig: {
        type: Object,
        default: {}
    },
    method: {
        type: String,
        default: 'Create'
    },
    // clusterId: {
    //   type: String,
    //   required: true
    // },
    // namespace: {
    //   type: String,
    //   required: true
    // },
})
onMounted(()=> {
    if(props.method != "Create") {
        data.newVolumeConfig = props.volumeConfig
    }
})
const data = reactive({
    newVolumeConfig: {
      // volume名称
        name: '',
        configMap: {
          // configmap的名称
          name: '',
          defaultMode: 420,
          items: [],
          optional: true,
        }
    },
    rules: {
        name: [
            {required: true, message: '请输入Volume名称', trigger: 'blur'}
        ],
        'configMap.name': [
            {required: true, message: '请选择ConfigMap', trigger: 'blur'},
        ],
        items: {
          key: [
            {required: true, message: '请输入ConfigMap Key', trigger: 'blur'}
          ],
          //  /   xxx/xxx
          path: [
            {required: true, message: '请输入挂载路径', trigger: 'blur'}
          ],
        }
    },
    items: [
    ]
})
let formRef = ref()
const submit = ()=>{
    formRef.value.validate((valid)=>{
        if(valid){
            console.log(data.newVolumeConfig)
            if (useItemer.item.spec.template.spec.volumes == undefined) {
              useItemer.item.spec.template.spec.volumes = []
            }
            for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++){
              if(useItemer.item.spec.template.spec.volumes[i].name == data.newVolumeConfig.name) {
                // 说明已经存在相同名字的volume
                ElMessage.error("Volume名称不能重复")
                return
              }
            }
            const newVolume = JSON.parse(JSON.stringify(data.newVolumeConfig))

            useItemer.item.spec.template.spec.volumes.push(newVolume)
            console.log(useItemer.item.spec.template.spec.volumes)
            // 关闭dialog
            closeDialog()
        } else {
          ElMessage.warning("请完善表单数据")
        }
    })
}
// 选择框展开调用接口查询数据
const visibleChanged = (visible)=>{
  console.log("visible:",visible)
  // 展开的时候去查询items
  if (visible) {
    // 调用查询列表的函数
    const getData = {
      clusterId: useItemer.clusterId,
      namespace: useItemer.namespace
    }
    getList(getData).then(
      (res) => {
        data.items = res.data.data.items
        console.log(data.items)
      }
    )
  }
}
const activeName = ref('basic')
// 添加item
const addItem = () => {
  const item = {
    key: "",
    path: "",
    mode: null,
  }
  if (data.newVolumeConfig.configMap.items == null || data.newVolumeConfig.configMap.items == undefined) {
    data.newVolumeConfig.configMap.items = []
  }

  data.newVolumeConfig.configMap.items.unshift(item)
}
// 订阅关闭dialog的方法
const closeDialog = inject("closeAddVolumeDialog")
const {newVolumeConfig, rules, items} = toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本配置" name="basic">
        <el-row :gutter="5">
          <!-- 名称 -->
          <el-col :span="6" v-if="props.method == 'Create'">
              <el-form-item label="Volume名称" prop="name" required>
                  <el-input v-model.trim="newVolumeConfig.name" style="width: 180px;" placeholder="请输入Volume名称" />
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="ConfigMap" prop="configMap.name" required>
                <el-select v-model="newVolumeConfig.configMap.name" placeholder="请选择ConfigMap" @visible-change="visibleChanged">
                  <el-option
                    v-for="item in items"
                    :key="item.metadata.name"
                    :label="item.metadata.name"
                    :value="item.metadata.name"
                  />
                </el-select>  
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="Key必须存在" title="当指定item时, 是否要求key必须存在" prop="configMap.optional">
                  <el-switch v-model="newVolumeConfig.configMap.optional" />
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="默认挂载权限"  prop="configMap.defaultMode">
                <Oct2Decimal v-model:data="newVolumeConfig.configMap.defaultMode"></Oct2Decimal>
                  <!-- <el-input-number :controls="false" v-model="newVolumeConfig.configMap.defaultMode" /> -->
              </el-form-item>
          </el-col>
      </el-row>
      </el-tab-pane>
      <el-tab-pane label="自定义挂载路径" name="items">
        <el-table :data="newVolumeConfig.configMap.items" border style="height: auto;">
          <el-table-column label="Key" width="240px" align="center">
            <template #default=scope>
              <!-- scope.$index: 当前行 -->
              <!-- configMap.items.2.key -->
              <!-- configMap.items.2.value -->
              <el-form-item label="" :prop="('configMap.items.'+scope.$index+'.key')" requried :rules="rules.items.key">
                <el-input v-model.trim="scope.row.key"   placeholder="请输入ConfigMap的key"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="挂载路径" width="" align="center">
            <template #default=scope>
              <el-form-item label="" :prop="('configMap.items.'+scope.$index+'.path')" requried :rules="rules.items.path">
                <el-input v-model.trim="scope.row.path"   placeholder="请输入挂载的相对路径"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="挂载权限" width="180px" align="center">
            <template #default=scope>
              <el-form-item label="">
                <Oct2Decimal v-model:data="scope.row.mode"></Oct2Decimal>
                <!-- <el-input v-model.trim="scope.row.mode"></el-input> -->
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center">
            <template #header>
              <el-button link type="primary" @click="addItem()">添加</el-button>
            </template>
            <template #default="scope">
              <el-button link type="warning" @click="deleteTableRow(newVolumeConfig.configMap.items, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 提交按钮 -->
    <div v-if="props.method == 'Create'" style="display: flex;">
        <el-button @click="submit()" type="primary" style="margin: 10px auto;">添加</el-button>
    </div>
  </el-form>
</template>

<style scoped>

</style>
